<template>
	<view>
		<view class="align-center justify-between  bgWhite" style="padding: 50rpx 0;">
			<view class="align-center">
				<view class="plr15">
					<view class="avatar radius50">
						<image :src="userInfo.avatar" class="radius50" mode="aspectFill"
							style="width: 100upx;height: 100upx;"></image>
					</view>
				</view>
				<view class="">
					<view class="align-center">
						<text class="ft18 bold">{{userInfo.nickname}}</text>
						<!-- 如果是会员/plus会员，显示等级 12-->
						<view class="ml10" v-if="userInfo.level<3">
							<image :src="'../../static/images/icon/vip'+userInfo.level+lang+'.png'" mode="heightFix"
								class="block" style="height: 40rpx;"></image>
						</view>
						<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
						<view class="ml10" v-if="userInfo.level>2">
							<image :src="'../../static/images/icon/'+(userInfo.star-1)+lang+'x.png'" mode="heightFix"
								class="block" style="height: 40rpx;"></image>
						</view>
					</view>
					<view class="align-center mt10 ">
						<view class=" gray6 ft13 mr10">{{$t('common').电话}}：{{userInfo.phone}}</view>
						<image src="../../static/images/index/hongdianhua.png" mode="aspectFill"
							style="width: 30rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
			<view class="seeBox ft12 white bglight tc" @click="supeInfoAPI()">
				<text>{{$t('index').我的导师}}</text>
			</view>
		</view>
		<view class="plr12 ">
			<view class=" mt15 bgWhite radius8 plr15">
				<view class=" ft15 ptb15 bdbe bold">{{$t('mine').累计销售额}}：{{monthinfo.total_sell|changeCurrency}}</view>
				<view class="mt10 flex-row tc">
					<view class="flex1">
						<view class="ptb15">
							<text class="ft20">{{monthinfo.total_new_f_value || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').团队本月销售额新增}}</view>
						</view>
						<view class="ptb15">
							<text class="ft20">{{monthinfo.estimatel_new_f_value || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').预估本月结算销售额}}</view>
						</view>
					</view>
					<view class="flex1">
						<view class="ptb15">
							<text class="ft20">{{monthinfo.total_new_f_valued || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').团队本月销售额已结算}}</view>
						</view>
						<view class="ptb15">
							<text class="ft20">{{monthinfo.estimatel_seven_f_value || 0}}</text>
							<view class="ft12 gray6 mt5">{{$t('mine').预计未来7天结算销售额}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="byks-box">
				<view class="align-center byks-head">
					<view class="byks-title gray9">{{$t('mine').本月考核排行榜}}</view>
					<u-icon name="info-circle" color="#999999" @click="showpos=true"></u-icon>
				</view>

				<!-- 			<view class="" v-if="examineList.length>0">
					<view class="align-center plr15 ptb15 bgWhite mb12 radius8" v-for="(item,index) in examineList"
						:key="index">
						<text class="ft15 bold">{{index+1}}</text>
						<view class="plr10 radius50">
							<image :src="item.user.avatar" class="radius50" mode="aspectFill"
								style="width: 80upx;height: 80upx;"></image>
						</view>
						<view class="flex1">
							<view class="align-center justify-between">
								<text class="ft12 bold">{{item.user.nickname}}</text>
								<view class="align-center">
									<text class="ft16">{{item.user.total_sell}}</text>
									<image src="../../static/images/mine/icon/arrowright.png" class="ml5" mode=""
										style="width: 10upx;height: 18upx;"></image>
								</view>
							</view>
							<view class="mt15">
								<u-line-progress :percentage="(item.user.total_sell/20000)*100" activeColor="#F44A42"
									inactiveColor="#FEF6F5" :showText="false" height="5"></u-line-progress>
							</view>
						</view>
					</view>
				</view> -->
				<view class="pt13" v-if="examineList.length>0">
					<view class="plr12 " v-for="(item,index) in examineList" :key="index">
						<!-- @click="navTo(`/pages/index/examine/settlement?uid=${item.user_id}`)" -->
						<view class="bgWhite align-center plr15 mb12 ptb15 radius8 justify-between">
							<view class="gray3 ft15 bold"><text>{{index+1}}</text></view>
							<view class="">
								<image class="radius50" :src="item.user.avatar" style="width: 80rpx;height: 80rpx;"
									mode="aspectFill"></image>
							</view>
							<view class="posRelative overhide">
								<view class="align-center pb10 justify-between" style="width: 471rpx;">
									<view class="ft12 bold gray3 clamp" style="width: 240rpx;">
										<text>{{item.user.nickname}}</text>
									</view>
									<view class="ft16 bold gray3">
										<text>{{item.f_value || 0}}</text>
									</view>
								</view>
								<view @click.stop="isShowData(index)">
									<!-- 大于2w -->
									<view class="" v-if="item.f_value>=20000">
										<view class="posRelative">
											<view class="posAbsort" style="left: 0;">
												<view class="bgGray" style="width: 471rpx;"></view>
											</view>
											<view class="posAbsort zIndex999" style="left: 0;">
												<view class="bgRed"
													:style="{width:(item.new_f_valued-item.add_f_value)/item.new_f_valued*471+'rpx'}">
												</view>
											</view>
											<view class="posAbsort " style="left: 0;">
												<view class="bgBlue"
													:style="{width:item.new_f_valued/item.new_f_valued*471+'rpx'}">
												</view>

											</view>
										</view>
									</view>
									<!-- 小于2w -->
									<view class="" v-else>
										<view class="posRelative">
											<view class="posAbsort" style="left: 0;">
												<view class="bgGray" style="width: 471rpx;"></view>
											</view>
											<view class="posAbsort zIndex999" style="left: 0;">
												<view class="bgRed"
													:style="{width:(item.new_f_valued-item.add_f_value)/20000*471+'rpx'}">
												</view>
											</view>
											<view class="posAbsort" style="left: 0;">
												<view class="bgBlue" :style="{width:item.new_f_valued/20000*471+'rpx'}">
												</view>
											</view>
										</view>
									</view>
								</view>
								<view v-if="isShow==index"
									style="width: 300rpx;top: -54rpx;left: 50%;transform: translate(-50%);"
									class="posAbsort">
									<view class="ptb2 "
										style="width: 300rpx;height: 80rpx;background-color: #333333;opacity: 0.8;border-radius: 8rpx;">
										<view class="white ft12 align-center">
											<view class="radius50 ml5 "
												style="width: 16rpx;height: 16rpx;background: #F44A42;">
											</view>
											<view class="ml5">
												<text>{{$t('index').月结算}}：{{item.f_value-item.add_f_value}}</text>
											</view>
										</view>
										<view class="white ft12 align-center">
											<view class="radius50 ml5"
												style="width: 16rpx;height: 16rpx;background: #178FFF;">
											</view>
											<view class="ml5"><text>{{$t('index').补充}}：{{item.add_f_value}}</text>
											</view>
										</view>
									</view>
									<view class="san" style="width: 20rpx;margin: 0 auto;"></view>
								</view>
							</view>
<!-- 							<view>
								<image src="../../static/images/mine/icon/arrowright.png"
									style="width: 10rpx;height: 18rpx;">
								</image>
							</view> -->
						</view>
					</view>
				</view>
				<view class="mt10 tc" v-else>
					<image src="../../static/images/empty/none.png" mode="" style="width: 520upx;height: 380upx;">
					</image>
					<view class="ft15">{{$t('common').暂无数据}}</view>
				</view>
			</view>
		</view>
		<!-- 我的导师 -->
		<u-popup :show="showteacher" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe ptb15">
				<view class="align-center plr15 gray6">
					<view class="ft14 mr10"><text>{{$t('index').我的导师}}:</text></view>
					<view class="align-center">
						<image class="radius50 mr10" style="width: 80rpx;height: 80rpx;" :src="myteacher.avatar"
							mode="aspectFill"></image>
						<view class="ft14 "><text>{{myteacher.nickname}}</text></view>
					</view>
				</view>
				<view class="plr15 gray6 ft14"><text>{{$t('index').手机号}}:{{myteacher.phone}}</text></view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showteacher=false">
				<view class="ft15 light"><text>{{$t('index').确定}}</text></view>
			</view>
		</u-popup>
		<!-- 大于3000的直推粉丝 -->
		<u-popup :show="showpos" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe ptb15" style="width: 600rpx;">
				<view class="align-center plr15 gray6 tc">
					<text>{{$t('mine').显示该用户下本月考核销售额大于3000的直推粉丝}}</text>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showpos=false">
				<view class="ft15 light"><text>{{$t('index').确定}}</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showteacher: false,
				myteacher: {}, //我的导师
				monthinfo: {}, //销售额
				examineList: [], //考核列表
				showpos: false,
				isShow: -1,
				lang: ''
			}
		},
		onLoad() {
			this.UserMonthsellAPI()
			uni.setNavigationBarTitle({
				title: this.$t('mine').用户详情
			})
			this.lang = uni.getStorageSync('lang').lang
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		methods: {
			//用户详情接口
			async UserMonthsellAPI() {
				const res = await this.$api.UserMonthsell()
				this.monthinfo = res.data.monthinfo
				this.examineList = res.data.list
			},
			// 我的导师接口
			async supeInfoAPI() {
				const res = await this.$api.supeInfo()
				if (res.data) {
					this.myteacher = res.data
					var reg = /^(\d{3})\d{4}(\d{4})$/;
					this.myteacher.phone = this.myteacher.phone.replace(reg, "$1****$2");
					this.showteacher = true
				} else {
					this.$utils.msg(this.$t('index').暂无导师)
				}
			},

			close() {
				this.showteacher = false
				this.showpos = false
			},
			isShowData(index) {
				if (index == this.isShow) {
					this.isShow = -1
				} else {
					this.isShow = index
				}
			},
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 100upx;
		height: 100upx;
	}

	.seeBox {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 100rpx 0rpx 0rpx 100rpx
	}

	.byks-box {
		.byks-head {
			padding: 32rpx 0;

			.byks-title {
				font-size: 28rpx;
				margin-right: 12rpx;
			}
		}
	}
	.san {

		border-top: 20rpx solid #333333;
		border-bottom: 0rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-right: 20rpx solid transparent;
		opacity: 0.8;
	}
	.bgGray {
		height: 10rpx;
		background: #FEF6F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgBlue {
		height: 10rpx;
		background: #178FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgRed {
		height: 10rpx;
		background: #F44A42;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}
</style>